<template>
  <app-flex :class="className">
    <div class="app-info-item__label" v-if="label">{{ label }}</div>
    <div class="app-info-item__value">
      <slot>
        {{ value }}
      </slot>
    </div>
  </app-flex>
</template>
<script setup>
const props = defineProps({
  label: String,
  value: [String, Number],
})

const className = computed(() => {
  return {
    'app-info-item': true,
  }
})

const style = computed(() => {
  return {}
})
</script>
<style lang="scss" scoped>
.app-info-item {
  display: flex;
  align-items: baseline;
}
.app-info-item__label {
  color: #778090;
}
.app-info-item__value {
  color: #252a30;
  flex: 1;
}
</style>
